﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>排放模块</title>
    <link rel="stylesheet" type="text/css" href="~/Assets/DashBoard/css/reset.css" />
    <link type="text/css" href="~/Assets/DashBoard/css/ft-carousel.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="~/Assets/DashBoard/css/reset.css" />
    <link rel="stylesheet" type="text/css" href="~/Assets/DashBoard/css/scanboard.css" />
    <link type="text/css" href="~/Assets/Styles/others/an-skill-bar.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="~/Assets/DashBoard/css/animsition.css" />
    <link rel="stylesheet" type="text/css" href="~/Assets/DashBoard/css/jquery.shCircleLoader.css" />
    <link href="~/Assets/Styles/libs/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Assets/Styles/libs/bootstrap.css" rel="stylesheet" />
    <link href="~/Assets/Styles/libs/bootstrap-select.css" rel="stylesheet" />
    <link href="~/UIAssets/plugins/switchery/switchery.min.css" rel="stylesheet" />
    <link href="~/Assets/DashBoard/css/video-js.min.css" rel="stylesheet" />
    <link href="~/Assets/Styles/libs/global.css" rel="stylesheet" />
    <link type="text/css" href="~/Assets/Styles/pg/oa.css" rel="stylesheet" />

    <link type="text/css" href="~/Assets/Styles/pg/monitor.css" rel="stylesheet" />
    <link type="text/css" href="~/Assets/Styles/menubar/sidebar.css" rel="stylesheet" />
    <link type="text/css" href="~/Assets/Styles/pg/monitorOther.css" rel="stylesheet" />
    <style type="text/css">

        .itemCon::-webkit-scrollbar {
            width: 10px;
        }

        .itemCon::-webkit-scrollbar-thumb {
            background-color: cornflowerblue;
            border-radius: 5px;
        }

        #alarmPart table {
            width: 100%;
            border-radius: 5px;
            height: 100%;
            color: white;
        }

            #alarmPart table tr td {
                border: 0px solid grey;
                line-height: 35px;
                text-align: center;
                vertical-align: middle;
                font-size: 12px;
            }

        .thead td {
            font-weight: bold;
        }

        .status-icon {
            min-width: 40px;
            width: 100%;
            height: 17px;
            vertical-align: middle;
            border-radius: 10px;
            margin-top: 19px;
            display: block;
            cursor: pointer;
        }

        #ConfigItems {
            margin-left: 10px;
        }

            #ConfigItems li {
            }

        .normal {
            height: 25px;
            float: left;
            border: 1px solid #02b6d4;
            border-radius: 5px;
            margin-left: 5px;
            padding: 2px;
            color: #02b6d4;
            cursor: pointer;
            font-weight: bold;
            display: block;
        }

        .focus {
            height: 25px;
            float: left;
            border: 1px solid #02b6d4;
            border-radius: 5px;
            margin-left: 5px;
            padding: 2px;
            color: white;
            font-weight: bold;
            background-color: #02b6d4;
            display: block;
            cursor: pointer;
        }

        .show {
            display: inline;
        }

        .hide {
            display: none;
        }

        .panel {
            background-color: #2F4056;
            border-color: #37638c;
        }

        .panel-info > .panel-heading {
            background-color: #2F4056;
            color: #9eb3dd;
            border-bottom: 1px solid #37638c;
        }

        .meter-info {
            width: 30%;
            word-break: keep-all; /* 不换行 */
            white-space: nowrap;
            display: inline-block;
        }

        .meter-head {
            color: white;
            font-weight: bold;
        }

        .meter-footer {
            color: white;
            font-weight: bold;
        }

        .meter {
            width: 20px;
            height: 150px;
            display: block;
            margin: 0 auto;
        }

        .dashboard {
            width: 100%;
            height: 185px;
        }


        .angular-google-map-container {
            width: 100%;
            height: 100%;
        }

        .list-group {
            background-color: #2F4056;
        }

        a.list-group-item, button.list-group-item, div.list-group-item {
            color: #9eb3dd;
            border: 1px solid #37638c;
        }

        .angular-google-map-container {
            height: 512px;
        }

        .list-group-item {
            padding: 8px 10px;
        }

        .list-group-item {
            padding: 5px;
            color: #555555;
        }

            .list-group-item .flow {
                display: inline-block;
                padding-left: 9px;
            }

                .list-group-item .flow .p-20 {
                    padding-left: 20px;
                }

        .tb_run_record {
            width: 100%;
        }

            .tb_run_record td {
                border: 1px solid #37638c;
                height: 30px;
                border-radius: 5px;
            }

        .text {
            color: lawngreen;
            font-weight: bold;
            font-size: 15px;
            position: relative;
        }

        .div-a {
            position: absolute;
        }

        .titleLegend {
            width: 15px;
            height: 10px;
            border-radius: 2px;
            float: right;
            margin-left: 5px;
            margin-top: 5px;
        }

        .legend_title {
            float: right;
            font-size: 11px;
            margin: 0px;
            padding: 0px;
        }

        .vjs-big-play-button {
            display: none;
        }
    </style>
</head>
<body style="height:100%;overflow:hidden;" ng-app="DashBoard">
    <div id="loader"></div>

    <div class="scanboardWp animsition" ng-controller="DashController" ng-init="doFindNowData();ShowNowData('总铬');ShowNowData('六价铬');ShowNowData('非甲烷总烃');">
        <div style="height:30px;">
            <div class="left pageTit" style="margin-left:30px;">
                <a href="../Emergency/Index" style="background:none;font-size:30px;width:10%;"><span class="glyphicon glyphicon-home"></span></a>
            </div>
        </div>
        <div id="main" class="wp clearfix">
            <div class="left">
                <div class="item">
                    <div class="itemTit">
                        <span class="border-blue">废水废气指数 </span>
                        <div style="width:70%;float:right;height:20px;margin-top:-20px;margin-right:-30px;">
                            <span class="legend_title" style="color:#00CC99;font-size: 10px;padding:0px;">80~100</span> <div class="titleLegend" style="background-color:#00CC99;"></div>
                            <span class="legend_title" style="color:yellow;font-size: 10px;padding:0px;">60~80</span> <div class="titleLegend" style="background-color:yellow;"></div>
                            <span class="legend_title" style="color:red;font-size: 10px;padding:0px;">0~60</span> <div class="titleLegend" style="background-color:red;"></div>
                        </div>
                    </div>
                    <div class="itemCon" style="height:260px;">
                        <div id="wastewaterpart" style="height:180px; width:48%; float:left;margin-right:10px;"></div>
                        <div id="exhaustpart" style="height:180px; width:48%; float:left;"></div>
                    </div>
                </div>


                <div class="item">
                    <div class="itemTit">
                        <span class="border-yellow">废气预测预警</span>
                    </div>
                    <div class="itemCon" style="height:260px;" id="alarmPart">

                    </div>
                </div>
                <div class="item">
                    <div class="itemTit">
                        <span class="border-yellow">危险废物存储量</span>
                    </div>
                    <div class="itemCon" style="height:240px;margin-top:20px;" id="dangerwastepiechart">

                    </div>
                </div>
            </div>
            <div class="center">
                <div class="centerWp">
                    <!--中间大地图-->
                    <div class="mapContainer" style="height:550px;width:100%;">
                        <div class="item">
                            <div class="itemTit">
                                <span class="border-yellow">废水总铬排放</span>
                            </div>
                            <div class="itemCon" style="height:240px;margin-top:20px;" id="Cr">

                            </div>
                        </div>
                        <div class="item">
                            <div class="itemTit">
                                <span class="border-yellow">废水六价铬排放</span>
                            </div>
                            <div class="itemCon" style="height:240px;margin-top:20px;" id="SixCr">

                            </div>
                        </div>
                        <div class="item">
                            <div class="itemTit">
                                <span class="border-yellow">废气非甲烷总烃排放</span>
                            </div>
                            <div class="itemCon" style="height:240px;margin-top:20px;" id="Exhaust">

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="right">
                <div class="item">
                    <div class="itemTit">
                        <span class="border-green">环境保护总体指标 EPI:<b id="EPIScore"></b></span>
                        <div style="width:80%;float:right;height:20px;margin-top:-20px;margin-right:-30px;">
                            <span class="legend_title" style="color:#00CC99;font-size: 10px;padding:0px;">80~100</span> <div class="titleLegend" style="background-color:#00CC99;"></div>
                            <span class="legend_title" style="color:yellow;font-size: 10px;padding:0px;">60~80</span> <div class="titleLegend" style="background-color:yellow;"></div>
                            <span class="legend_title" style="color:red;font-size: 10px;padding:0px;">0~60</span> <div class="titleLegend" style="background-color:red;"></div>
                        </div>
                    </div>
                    <div class="itemCon" id="EPI" style="height:260px;">

                    </div>
                </div>

                <div class="item">
                    <div class="itemTit">
                        <span class="border-green">设备监控</span>
                    </div>
                    <div class="itemCon" style="height:260px;width:100%;">
                        <img src="~/Images/Monitor/nofire.png" id="stopimg5" style="position:relative;width:22px; top:171px;left:11%;" />
                        <img src="~/Images/Monitor/nofire.png" id="stopimg6" style="position:relative;width:22px; top:171px;left:27.5%;" />
                        <img src="~/Images/Monitor/nofire.png" id="stopimg7" style="position:relative;width:22px; top:171px;left:52%;" />
                        <img src="~/Images/Monitor/nofire.png" id="stopimg8" style="position:relative;width:22px; top:171px;left:61.5%;" />
                        <a data-toggle="modal" data-target="#formModal"><div><img src="../../Images/Monitor/glf.png" style="width:100%;"></div></a>
                    </div>
                </div>
                <div class="item">
                    <div class="itemTit">
                        <span class="border-yellow">设备能耗</span>
                    </div>
                    <div class="itemCon" style=" height:240px;margin-top:20px;">
                        <div style="width:30%;float:left;">
                            <img height="180" width="100%" src="~/Assets/Images/genset.jpg" />
                        </div>
                        <div style="width:40%;float:left;padding-left:0px;padding-right:0px;" ng-cloak>
                            <div class="meter-info text-center">
                                <div class="meter-head">
                                    <small>{{NowData.CurrentA}}A</small>
                                </div>
                                <div class="meter meter-striped">
                                    <div ng-cloak class="meter-bar meter-bar-info active" role="meterbar" ng-style="{height: NowData.CurrentA/1 + '%'}"></div>
                                </div>
                                <div class="meter-footer"><small>A</small></div>
                            </div>
                            <div class="meter-info text-center">
                                <div class="meter-head">
                                    <small>{{NowData.CurrentB}}A</small>
                                    @*<small>100.01</small>*@
                                </div>
                                <div class="meter meter-striped">
                                    <div ng-cloak class="meter-bar meter-bar-info active" role="meterbar" ng-style="{height: NowData.CurrentB/1  + '%'}"></div>
                                </div>
                                <div class="meter-footer"><small>B</small></div>
                            </div>
                            <div class="meter-info text-center">
                                <div class="meter-head">
                                    <small>{{NowData.CurrentC}}A</small>
                                    @*<small>100.01</small>*@
                                </div>
                                <div class="meter meter-striped">
                                    <div ng-cloak class="meter-bar meter-bar-info active" role="meterbar" ng-style="{height: NowData.CurrentC/1  + '%'}"></div>
                                </div>
                                <div class="meter-footer"><small>C</small></div>
                            </div>
                        </div>
                        <div style="width:30%;float:left;">
                            <div class="meter-info text-center" style="margin-left:10px;">
                                <dashboard id="power-dashboard"
                                           name="有功功率"
                                           unit="KW"
                                           value="(NowData.Power)"
                                           min="0"
                                           max="60"
                                           option="dashboardOptionPower"
                                           class="dashboard"></dashboard>
                                <p class="text-center"></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="formModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog" style="min-width:1671px;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">设备监控</h4>
                </div>
                <div class="modal-body" style="margin:0px;padding:0px;height:830px; background-size:100%; background-repeat:no-repeat; background-image:url('../../Assets/Images/dcglf.png')">
                    <div style="height:830px; background-size:100%; background-repeat:no-repeat; background-image:url('../../Assets/Images/dcglf.png')">
                        <div>
                            <span class="text" id="JK_AI14" style="top:4.8rem;left:4rem;">0</span>
                            <span class="text" id="JK_AI15" style="top:21rem;left:0rem;">0</span>
                            <span class="text" id="JK_AI16" style="top:8.7rem;left:26rem;">0</span>
                            <span class="text" id="JK_AI5" style="top:17.5rem;left:53rem;">0</span>
                            <span class="text" id="JK_AI8" style="top:19rem;left:90rem;">0</span>
                            <span class="text" id="JK_AI9" style="top:18rem;left:70rem;">0</span>
                        </div>
                        <div>
                            <span class="text" id="SGU1_AI1" style="top:51rem;left:4rem;">0</span>
                            <span class="text" id="SGU1_AI12" style="top:46.5rem;left:15rem;">0</span>
                            <span class="text" id="SGU1_AI5" style="top:58rem;left:-3rem;"></span>
                            <span class="text" id="SGU1_AI6" style="top:77rem;left:14rem;"></span>
                        </div>

                        <div>
                            <span class="text" id="SGU2_AI1" style="top:49rem;left:45rem;">0</span>
                            <span class="text" id="SGU2_AI12" style="top:44.5rem;left:55rem;">0</span>
                            <span class="text" id="SGU2_AI5" style="top:56rem;left:37rem;">0</span>
                            <span class="text" id="SGU2_AI6" style="top:75rem;left:52rem;">0</span>
                        </div>

                        <div>
                            <span class="text" id="SGU3_AI1" style="top:47rem;left:86rem;">0</span>
                            <span class="text" id="SGU3_AI12" style="top:42.5rem;left:98rem;">0</span>
                            <span class="text" id="SGU3_AI5" style="top:54rem;left:82rem;">0</span>
                            <span class="text" id="SGU3_AI6" style="top:73rem;left:100rem;">0</span>
                        </div>

                        <div>
                            <span class="text" id="SGU4_AI1" style="top:44.5rem;left:127rem;">0</span>
                            <span class="text" id="SGU4_AI12" style="top:40.5rem;left:142rem;">0</span>
                            <span class="text" id="SGU4_AI5" style="top:51.5rem;left:119rem;">0</span>
                            <span class="text" id="SGU4_AI6" style="top:71rem;left:136rem;">0</span>
                        </div>
                        <div>
                            <img src="~/Images/Monitor/nofire.png" id="stopimg1" style="position:absolute;width:109px; top:60rem;left:16rem;" />
                            <img src="~/Images/Monitor/nofire.png" id="stopimg2" style="position:absolute;width:109px; top:60rem;left:57rem;" />
                            <img src="~/Images/Monitor/nofire.png" id="stopimg3" style="position:absolute;width:109px; top:60rem;left:99rem;" />
                            <img src="~/Images/Monitor/nofire.png" id="stopimg4" style="position:absolute;width:109px; top:60rem;left:140rem;" />
                            <img src="~/Images/Monitor/dc_fire.gif" id="fire1" style="position:absolute; width:51px; top:69.5rem;left:19rem;" />
                            <img src="~/Images/Monitor/dc_fire.gif" id="fire2" style="position:absolute; width:52px; top:69.3rem;left:59.6rem;" />
                            <img src="~/Images/Monitor/dc_fire.gif" id="fire3" style="position:absolute; width:52px; top:69.3rem;left:101.6rem;" />
                            <img src="~/Images/Monitor/dc_fire.gif" id="fire3" style="position:absolute; width:52px; top:69.3rem;left:142.6rem;" />
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

</body>
@*<script type="text/javascript" src="~/Assets/DashBoard/js/bg.js"></script>*@
<script type="text/javascript" src="~/Assets/DashBoard/js/jquery.min.js"></script>
<script type="text/javascript" src="~/Assets/DashBoard/js/jquery.shCircleLoader-min.js"></script>
<script type="text/javascript" src="~/Assets/DashBoard/js/ft-carousel.min.js"></script>
<script src="~/Assets/Scripts/libs/bootstrap.min.js"></script>
<script src="~/Assets/Scripts/libs/bootstrap-select.js"></script>
<script src="~/Assets/Scripts/base/angular.js"></script>
<script src="~/Assets/Scripts/pg/DashBoard.js"></script>
<script src="~/UIAssets/plugins/switchery/switchery.min.js"></script>
<script type="text/javascript" src="~/Assets/DashBoard/js/scanboard.js"></script>
<script type="text/javascript" src="~/Assets/DashBoard/js/fontscroll.js"></script>
<script type="text/javascript" src="~/Assets/DashBoard/js/jquery.animsition.js"></script>
<script type="text/javascript" src="~/Assets/DashBoard/js/jquery.nicescroll.js"></script>
<script type="text/javascript" src="~/Assets/DashBoard/js/echarts.min.js"></script>
<script src="~/Assets/DashBoard/js/video.min.js"></script>


<script type="text/javascript">

    $('#loader').shCircleLoader({ color: "#00deff" });
    LoadData();
    function LoadData() {
        setTimeout(function () {
            InitWaterPart();
            InitExhaustPart();
            InitAlarmData();
            InitEPI();
            InitDangerwastePie();
            controlstatus();
        }, 2000);
        setInterval(function () {
            InitAlarmData();
        }, 30000);
    }
    function InitAlarmData() {
        $.ajax({
            type: "post",
            url: '../Exhaust/GetMnExhaustListBy202',
            success: function (datas) {
                var datalist = datas.Data.AllList;
                var htmlcontent = "<table>";
                htmlcontent += "<tr style='font-weight:bold;'><td>排口</td><td>时间</td><td>瞬时浓度</td><td>平均浓度</td><td>状态</td></tr>";
                for (var i = 0; i < datalist.length; i++) {
                    htmlcontent += "<tr>";
                    htmlcontent += "<td style='text-align:left;'>" + datalist[i].Env_MnName + "</td>";
                    htmlcontent += "<td>" + fomartDate('HH:MM:SS', datalist[i].NowDateTime) + "</td>";
                    htmlcontent += "<td>" + datalist[i].NowDateValA24088 + "</td>";
                    htmlcontent += "<td>" + datalist[i].HourFlagYesAvg + "</td>";
                    htmlcontent += "<td>" + GetStatus(datalist[i].Status) + "</td>";
                    htmlcontent += "</tr>";
                }
                htmlcontent += "</table>";
                $("#alarmPart").html(htmlcontent);
            }, error: function (err) {

            }
        });
    }
    function InitExhaustPart() {
        var charobj = document.getElementById('exhaustpart');
        charobj.style.width = (document.getElementById("exhaustpart")).offsetWidth + "px";
        var myChart = echarts.init(charobj);

        $.ajax({
            type: "post",
            url: '../DashBoard/GetExhaustAPI',
            success: function (datas) {
                $("#exhaustvalue").html(datas.toFixed(5));
                var color = '#00CC99';
                if (datas < 80) {
                    color = 'yellow';
                }
                else if (datas < 60) {
                    color = 'red';
                }
                var option1 = {
                    title: {
                        show: true,
                        text: '废气API',
                        subtext: datas.toFixed(4),
                        x: 'center',
                        y: 'bottom',
                        textStyle: {
                            color: "white",
                            fontSize: 12
                        }
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "",
                        show: true
                    },
                    color: [color, 'grey', '#4C9BC7'],   //环形颜色
                    graphic: {       //图形中间文字
                        type: "text",
                        left: "center",
                        top: "center",
                        style: {
                            text: parseInt(datas),
                            textAlign: "center",
                            fill: "#fff",
                            fontSize: 18
                        }
                    },
                    series: [
                        {
                            name: '',
                            type: 'pie',
                            radius: ['40%', '80%'],       //饼图大小
                            labelLine: {    //图形外文字线
                                normal: {
                                    length: 35,
                                    length2: 80
                                }
                            },
                            label: {
                                normal: {
                                    show: false,
                                    formatter: ' {c|{c}%}  \n  {b|{b}}  \n\n',       //图形外文字上下显示
                                    borderWidth: 20,
                                    borderRadius: 4,
                                    padding: [0, -80],          //文字和图的边距
                                    rich: {
                                        a: {
                                            color: '#333',
                                            fontSize: 33,
                                            lineHeight: 20
                                        },
                                        b: {                        //name 文字样式
                                            fontSize: 20,
                                            lineHeight: 20,
                                            color: '#CDCDD0'
                                        },
                                        c: {                   //value 文字样式
                                            fontSize: 25,
                                            lineHeight: 20,
                                            color: '#63BF6A',
                                            align: "center"
                                        }
                                    }
                                }
                            },
                            data: [
                                { value: datas.toFixed(5), name: '废气API指数' },
                                { value: 100 - datas.toFixed(5), name: '' },
                            ]
                        }
                    ]
                };
                myChart.setOption(option1);
                myChart.resize();
                setInterval(function () {
                    $.ajax({
                        type: "post",
                        url: '../DashBoard/GetExhaustAPI',
                        success: function (datas) {
                            var color = '#00CC99';
                            if (datas < 80) {
                                color = 'yellow';
                            }
                            else if (datas < 60) {
                                color = 'red';
                            }
                            option1.color[0] = color;
                            option1.graphic.style.text = Math.round(datas);
                            option1.series[0].data[0] = datas.toFixed(5);
                            option1.series[0].data[1] = 100 - datas.toFixed(5);
                            myChart.setOption(option1);
                        }, error: function (err) {

                        }
                    });

                }, 30000);
            }, error: function (err) {

            }
        });

    }
    function InitWaterPart() {
        //污水
        var charobj = document.getElementById('wastewaterpart');
        charobj.style.width = (document.getElementById("wastewaterpart")).offsetWidth + "px";
        var myChart = echarts.init(charobj);
        $.ajax({
            type: "post",
            url: '../DashBoard/GetWasteWaterAPI',
            success: function (datas) {
                var color = '#00CC99';
                if (datas < 80) {
                    color = 'yellow';
                }
                else if (datas < 60) {
                    color = 'red';
                }
                var option1 = {
                    title: {
                        show: true,
                        text: '废水WPI',
                        subtext: datas.toFixed(3),
                        x: 'center',
                        y: 'bottom',
                        textStyle: {
                            color: "white",
                            fontSize: 12
                        }
                    },

                    color: [color, 'grey', '#4C9BC7'],   //环形颜色
                    graphic: {       //图形中间文字
                        type: "text",
                        left: "center",
                        top: "center",
                        style: {
                            text: Math.round(datas),
                            textAlign: "center",
                            fill: "#fff",
                            fontSize: 18
                        }
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "",
                        show: true
                    },
                    series: [
                        {
                            name: '',
                            type: 'pie',
                            radius: ['40%', '80%'],       //饼图大小
                            labelLine: {    //图形外文字线
                                normal: {
                                    length: 35,
                                    length2: 80
                                }
                            },
                            label: {
                                normal: {
                                    show: false,
                                    formatter: ' {c|{c}%}  \n  {b|{b}}  \n\n',       //图形外文字上下显示
                                    borderWidth: 20,
                                    borderRadius: 4,
                                    padding: [0, -80],          //文字和图的边距
                                    rich: {
                                        a: {
                                            color: '#333',
                                            fontSize: 33,
                                            lineHeight: 20
                                        },
                                        b: {                        //name 文字样式
                                            fontSize: 20,
                                            lineHeight: 20,
                                            color: '#CDCDD0'
                                        },
                                        c: {                   //value 文字样式
                                            fontSize: 25,
                                            lineHeight: 20,
                                            color: '#63BF6A',
                                            align: "center"
                                        }
                                    }
                                }
                            },
                            data: [
                                { value: datas.toFixed(5), name: '废水WPI指数' },
                                { value: 100 - datas.toFixed(5), name: '' },
                            ]
                        }
                    ]
                };
                myChart.setOption(option1);
                myChart.resize();

                setInterval(function () {
                    $.ajax({
                        type: "post",
                        url: '../DashBoard/GetWasteWaterAPI',
                        success: function (datas) {
                            $("#watervalue").html(datas.toFixed(5));
                            var color = '#00CC99';
                            if (datas < 80) {
                                color = 'yellow';
                            }
                            else if (datas < 60) {
                                color = 'red';
                            }
                            option1.color[0] = color;
                            option1.graphic.style.text = Math.round(datas);
                            option1.series[0].data[0] = datas.toFixed(5);
                            option1.series[0].data[1] = 100 - (datas.toFixed(5));
                            myChart.setOption(option1);
                        }, error: function (err) {

                        }
                    });

                }, 30000);
            }, error: function (err) {

            }
        });


    }

    function InitEPI() {
        var data = [];
        var charobj = document.getElementById('EPI');
        charobj.style.width = (document.getElementById("EPI")).offsetWidth + "px";
        var myChart = echarts.init(charobj);
        var option = {
            title: {
                show: false,
                text: '',
                textStyle: {
                    color: 'white'
                },
            },
            tooltip: {
                trigger: 'axis',
                formatter: function (params) {
                    params = params[0];
                    var date = new Date(params.name);
                    return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1] + "";
                },
                axisPointer: {
                    animation: false
                }
            },
            grid: {
                height: "80%",
                top: 10, //组件离容器上侧的距离，百分比字符串或整型数字
                left: 25, //组件离容器右侧的距离,百分比字符串或整型数字
                right: 10
            },
            xAxis: {
                type: 'time',
                splitLine: {
                    lineStyle: {
                        color: '#2F4F4F'
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: '#fff',
                        width: 1,
                    }
                }
            },
            yAxis: {
                type: 'value',
                max: 100,
                min: 50,
                boundaryGap: [0, '100%'],
                splitLine: {
                    lineStyle: {
                        color: '#2F4F4F'
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: '#fff',
                        width: 1,
                    }
                },
            },
            series: [{

                name: '累计耗油量',
                type: 'line',
                showSymbol: false,
                hoverAnimation: false,
                data: data,
                itemStyle: {
                    normal: {
                        color: '#0099CC', //改变折线点的颜色
                        lineStyle: {
                            color: '#00CC99' //改变折线颜色
                        }
                    }
                },
            }]
        };
        setInterval(function () {
            $.ajax({
                type: "post",
                url: '../DashBoard/GetEPI',
                success: function (datas) {
                    $("#EPIScore").html(datas.value.toFixed(2));
                    var now = new Date();
                    var obj = {
                        name: datas.name,
                        smooth: false,
                        value: [
                            datas.name,
                            datas.value
                        ]
                    };
                    if (option.series[0].data.length > 20) {
                        option.series[0].data.shift();
                    }
                    data.push(obj);
                    option.series[0].data = data;
                    myChart.setOption(option);
                }, error: function (err) {

                }
            });

        }, 30000);
        myChart.setOption(option);
        myChart.resize();
    }
    function InitDangerwastePie() {
        $.ajax({
            type: "post",
            url: '../DangerWaste/GetAllDangerWasteList',
            success: function (datas) {
                var ChartList = datas.Data;
                var dataArray = [];
                var nameArray = [];
                var Sum = 0;
                for (var i = 0; i < ChartList.length; i++) {
                    if (ChartList[i].NowWeight > 0) {
                        var datas = {};
                        datas.name = ChartList[i].WasteName;
                        datas.value = ChartList[i].NowWeight;
                        nameArray.push(ChartList[i].WasteName);
                        dataArray.push(datas);
                        Sum = Sum + ChartList[i].NowWeight;
                    }
                }
                Sum = Sum.toFixed(3)
                var charobj = document.getElementById('dangerwastepiechart');
                charobj.style.width = (document.getElementById("dangerwastepiechart")).offsetWidth + "px";
                var myChart = echarts.init(charobj);
                var option = {
                    title: {
                        text: '' + Sum + "吨",
                        subtext: '',
                        left: 'center',
                        textStyle: {
                            color: 'white'
                        }
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b}: {c} 吨 ({d}%)'
                    },

                    series: [
                        {
                            name: '',
                            type: 'pie',
                            radius: ['30%', '50%'],
                            center: ['50%', '50%'],
                            avoidLabelOverlap: true,
                            label: {
                                show: true,
                                position: 'bottom'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '30',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: dataArray
                        }
                    ]
                };
                myChart.setOption(option);
                myChart.resize();
            }, error: function (err) {

            }
        });
    }
    function fomartDate(format, date) {
        if (date) {
            var r = date.replace(/[^0-9|-]+/g, '');
            var timestamp = Number(r);
            return dateFormat(format, new Date(timestamp));
        }
    }

    function dateFormat(fmt, date) {
        let ret;
        const opt = {
            "Y+": date.getFullYear().toString(),        // 年
            "m+": (date.getMonth() + 1).toString(),     // 月
            "d+": date.getDate().toString(),            // 日
            "H+": date.getHours().toString(),           // 时
            "M+": date.getMinutes().toString(),         // 分
            "S+": date.getSeconds().toString()          // 秒
            // 有其他格式化字符需求可以继续添加，必须转化成字符串
        };
        for (let k in opt) {
            ret = new RegExp("(" + k + ")").exec(fmt);
            if (ret) {
                fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
            };
        };
        return fmt;
    }
    function GetStatus(status) {
        if (status == "1") {
            return '<div style="width:100%;height:100%;"><span class="status-icon" style = "background:#4cff00" ></span></div>';
        }
        if (status == "2") {
            return '<div><span class="status-icon" style = "background:#ffd800" ></span></div>';
        }
        if (status == "3") {
            return '<div><span class="status-icon" style = "background:#ff0000" ></span></div>';
        }
    }

    function DeviceData(type) {
        $.ajax({
            type: "post",
            url: '../Monitor/GetEnergyData?type=' + type,
            success: function (data) {
                var datas = JSON.parse(data);
                if (datas.Datas != null && datas.Datas.length > 0) {
                    var dataArray = datas.Datas;
                    for (var i = 0; i < dataArray.length; i++) {
                        if (dataArray[i].Value.indexOf('.') > -1) {
                            $("#" + dataArray[i].Key).html(parseFloat(dataArray[i].Value).toFixed(2));
                        }
                        else {
                            $("#" + dataArray[i].Key).html(dataArray[i].Value);
                        }

                        if (dataArray[i].Key.indexOf('_AI5') > -1 || dataArray[i].Key.indexOf('_AI6') > -1 && dataArray[i].Key != "JK_AI5") {
                            $("#" + dataArray[i].Key).append('%');
                        }
                    }
                }
            }, error: function (err) {

            }
        });
    }


    function controlstatus() {
        if ($("#SGU1_AI6").html() == "0" || $("#SGU1_AI6").html() == "0%") {
            $("#stopimg1").show();
            $("#stopimg5").show();
            $("#fire1").hide();
        } else {
            $("#stopimg1").hide();
            $("#stopimg5").hide();
            $("#fire1").show();
        }
        if ($("#SGU2_AI6").html() == "0" || $("#SGU2_AI6").html() == "0%") {
            $("#stopimg2").show();
            $("#stopimg6").show();
            $("#fire2").hide();
        } else {
            $("#stopimg2").hide();
            $("#stopimg6").hide();
            $("#fire2").show();
        }
        if ($("#SGU3_AI6").html() == "0" || $("#SGU3_AI6").html() == "0%") {
            $("#stopimg3").show();
            $("#stopimg7").show();
            $("#fire3").hide();
        } else {
            $("#stopimg3").hide();
            $("#stopimg7").hide();
            $("#fire3").show();
        }
        if ($("#SGU4_AI6").html() == "0" || $("#SGU4_AI6").html() == "0%") {
            $("#stopimg4").show();
            $("#stopimg8").show();
            $("#fire4").hide();
        } else {
            $("#stopimg4").hide();
            $("#stopimg8").hide();
            $("#fire4").show();
        }
    }
    setInterval(function () {
        DeviceData('JK'); DeviceData('SGU1'); DeviceData('SGU2'); DeviceData('SGU3'); DeviceData('SUG4');
    }, 10000);
</script>






